<script setup>
const props = defineProps(["cards", "type", "isMyAd"]);
import { useRoute, useRouter } from "vue-router";
import { covers } from "../../enums/cover";
import question from "../../assets/question_cover.png";
import { ref } from "vue";
import { http } from "../../services/service";
import { useUserStore } from "../../store/index";
import { useI18n } from "vue-i18n";
const i18nUse = useI18n();
const router = useRouter();
const route = useRoute();
const store = useUserStore();

import { defineEmits } from "vue";
const emit = defineEmits(["refresh"]);

const routerTo = (card) => {
  if (props.isMyAd) {
    return;
  }
  if (props.type == "sell") {
    router.push({ path: "/cardSell", query: { card: JSON.stringify(card) } });
  } else {
    router.push({ path: "/cardDetail", query: { card: JSON.stringify(card) } });
  }
};
const getCard = (card) => {
  if (props.type == "sell") {
    return question;
  } else {
    return covers[card.cardId]?.cover;
  }
};
const selectedcard = ref();
const show = ref(false);
const cancelTrade = (card) => {
  show.value = true;
  selectedcard.value = card;
};
const onConfirm = () => {
  http
    .get(
      `/api/v1/center/cancelMyAd?telegramId=${store.getUser?.telegramId}&adId=${selectedcard.value?.id}`
    )
    .then(
      (response) => {
        if (response?.data?.code === 200) {
          showToast(i18nUse.t("cancel_success"));
          emit("refresh");
        } else {
          showToast(response?.data?.message);
          emit("refresh");
        }
      },
      () => {}
    );
};
</script>

<template>
  <van-dialog
    v-model:show="show"
    show-cancel-button
    :confirm-button-text="$t('confirm')"
    :cancel-button-text="$t('cancel')"
    cancel-button-color="#95979E"
    @confirm="onConfirm"
  >
    <div class="withDrawDialog">
      <div>
        <div style="text-align: center">{{ $t("isCancel") }}</div>
      </div>
    </div>
  </van-dialog>
  <div class="card-container">
    <div v-for="card in props.cards" @click="routerTo(card)">
      <img :src="getCard(card)" alt="" style="width: 100%; height: 182px;object-fit: cover;" />
      <div class="bottom-container">
        <div style="padding-top: 15px">
          {{ props.type !== "sell" ? $t("seller") : $t("buyer") }} :
          {{ card["nickName"] }}
        </div>
        <div style="padding-top: 10px">{{ $t("price") }}: {{ card.price }}</div>
        <div>
          <van-button
            color="#4A61F9"
            class="code-btn"
            v-if="props.isMyAd"
            style="margin-top: 5px"
            @click="cancelTrade(card)"
          >
            <span>{{ $t("cancel") }}</span>
          </van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.card-container {
  position: relative;
  padding: 0 16px;
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  > div {
    margin-top: 10px;
    width: 45%;
    height: 280px;

    .bottom-container {
      height: calc(100% - 182px);
      background-color: #313444;
      border-radius: 10px;
      font-size: 14px;
      margin-top: -10px;

      padding-left: 10px;

      > div {
        width: 100%;
      }
    }
  }
}
.code-btn {
  height: 24px;
}
.withDrawDialog {
  padding: 40px;
  font-size: 16px;
  > div {
    color: #fff !important;
  }
}
</style>
